<template>
    <div class="page-wrapper" style="height:auto; background-image: linear-gradient(to bottom, #ebf8ff, #f5f7fa );">
        <div class="page-content" style="padding:160px 0 60px 0;">
            <div class="title">关于华翊</div>
            <div class="text" style="margin-bottom:50px;">广东华翊智能科技有限公司（以下简称“华翊智能”）是一家物联网平台服务商，公司致力于为B端客户提供等全方位数字化产品和集成服务，依托公司多年精益辅导团队基因和数字化能力，通过物联网+云+边缘计算+大数据为手段，以“省钱、省心、省事”为目的，为用户赋能，帮助企业实现数字化转型提供服务。</div>
            <div><img :src="Icon1" /></div>
            <div style="display:flex; align-items:center; justify-content:space-between; width:80%; margin:0 auto; ">
                <div
                    v-for="(item, index) in data1"
                    :key="index"
                    style="width:300px; padding:40px; display:flex; flex-direction: column; align-items:center; justify-content:flex-start; "
                >
                    <div><img :src="item.img" /></div>
                    <div style="font-size:32px; line-height:36px; color:#000; margin:30px 0; border-bottom:4px solid #335CFF; padding-bottom:26px; ">{{  item.title }}</div>
                    <div style="font-size:24px; line-height:36px; color:#525866; ">{{  item.content }}</div>
                </div>
            </div>
        </div>
    </div>
    <div class="page-wrapper" style="background-image: linear-gradient(285deg, #335cff, #47c2ff);">
        <div class="page-content" :style="{ backgroundRepeat:'no-repeat', backgroundSize:'contain', backgroundImage:`url(${Icon5})`, backgroundPosition:'50% 50%' }"></div>
    </div>
    <div class="page-wrapper" style="background:#F5F7FA; height:auto; text-align:center;  ">
        <div class="page-content" style="padding:80px 0;"><img :src="Icon6" /></div>
    </div>
</template>

<script setup>
    import { watch, ref } from 'vue';
    import Icon1 from '../../../public/about-icon-1.png';
    import Icon2 from '../../../public/about-icon-2.png';
    import Icon3 from '../../../public/about-icon-3.png';
    import Icon4 from '../../../public/about-icon-4.png';
    import Icon5 from '../../../public/about-icon-5.png';
    import Icon6 from '../../../public/about-icon-6.png';
    const data1 = [
        { title:'愿景', img:Icon2, content:'联接人与物、物与物人与人，让管理更简单、更安全、更高效' },
        { title:'使命', img:Icon3, content:'深耕工业物联网行业为工商业用户创造价值。' },
        { title:'价值观', img:Icon4, content:'客户至上，挑战自我, 认真生活。'}
    ];
   
</script>

<style scoped>
    .text {
        font-size:24px;
        line-height:36px;
        color:#525866;
    }
</style>